<template>
  <el-input
    :value="showValue"
    placeholder="Please input"
    class="input-with-select"
    :disabled="true"
  >
    <template #append>
      <el-button @click="openDialog()"><Icon icon="ep:search" /></el-button>
    </template>
  </el-input>
  <Dialog v-model="dialogVisible" :title="dialogTitle" :destroy-on-close="true" width="80%">
    <el-row :gutter="20">
      <!-- 左侧部门树 -->
      <el-col :span="4" :xs="24">
        <ContentWrap class="h-1/1">
          <DeptTree @node-click="handleDeptNodeClick" />
        </ContentWrap>
      </el-col>
      <el-col :span="20" :xs="24">
        <!-- 搜索 -->
        <ContentWrap>
          <el-form
            class="-mb-15px"
            :model="queryParams"
            ref="queryFormRef"
            :inline="true"
            label-width="68px"
          >
            <el-form-item label="用户ID" prop="id">
              <el-input
                v-model="queryParams.id"
                placeholder="请输入用户ID"
                clearable
                @keyup.enter="handleQuery"
                class="!w-120px"
              />
            </el-form-item>
            <el-form-item label="用户名称" prop="username">
              <el-input
                v-model="queryParams.username"
                placeholder="请输入用户名称"
                clearable
                @keyup.enter="handleQuery"
                class="!w-120px"
              />
            </el-form-item>
            <el-form-item label="手机号码" prop="mobile">
              <el-input
                v-model="queryParams.mobile"
                placeholder="请输入手机号码"
                clearable
                @keyup.enter="handleQuery"
                class="!w-120px"
              />
            </el-form-item>
            <el-form-item label="证件号码" prop="identityCard">
              <el-input
                v-model="queryParams.identityCard"
                placeholder="请输入手机号码"
                clearable
                @keyup.enter="handleQuery"
                class="!w-120px"
              />
            </el-form-item>
            <el-form-item>
              <el-button @click="handleQuery"> <Icon icon="ep:search" />搜索 </el-button>
              <el-button @click="resetQuery"> <Icon icon="ep:refresh" />重置 </el-button>
            </el-form-item>
          </el-form>
        </ContentWrap>
        <ContentWrap>
          <el-checkbox-group v-model="selectIds">
            <el-table v-loading="loading" :data="list">
              <el-table-column align="center" width="40px">
                <template #default="scope">
                  <el-checkbox
                    :label="scope.row.id"
                    @change="(value) => clickCheck(value, scope.row.id)"
                    >&nbsp;</el-checkbox
                  >
                </template>
              </el-table-column>
              <el-table-column align="center" type="selection" width="55" v-if="!props.isSingle" />

              <el-table-column label="用户编号" align="center" key="id" prop="id" />
              <el-table-column
                label="用户名称"
                align="center"
                prop="username"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                label="部门"
                align="center"
                key="deptName"
                prop="dept.name"
                :show-overflow-tooltip="true"
              />
              <el-table-column label="直属上级" align="center" prop="leader" width="120" />
              <el-table-column label="手机号码" align="center" prop="mobile" width="120" />
              <el-table-column label="身份证号码" align="center" prop="identityCard" width="120" />
              <el-table-column label="状态" key="status">
                <template #default="scope">
                  <el-switch v-model="scope.row.status" :active-value="0" :inactive-value="1" />
                </template>
              </el-table-column>
              <el-table-column
                label="创建时间"
                align="center"
                prop="createTime"
                :formatter="dateFormatter"
                width="180"
              />
            </el-table>
          </el-checkbox-group>
          <Pagination
            :total="total"
            v-model:page="queryParams.pageNo"
            v-model:limit="queryParams.pageSize"
            @pagination="getList"
          />
        </ContentWrap>
        <ContentWrap align="center">
          <el-button @click="handleOK()"> <Icon icon="ep:check" />确认 </el-button>
          <el-button @click="handleClose()"> <Icon icon="ep:close" />取消 </el-button>
        </ContentWrap>
      </el-col>
    </el-row>
  </Dialog>
</template>
<script setup lang="ts" name="SystemUserSelect">
import { dateFormatter } from '@/utils/formatTime'
import * as UserApi from '@/api/system/user'
import DeptTree from '@/views/system/user/DeptTree.vue'

const props = defineProps({
  value: {
    type: [String, Number],
    default() {
      return ''
    }
  },
  isSingle: {
    type: Boolean,
    default() {
      return true
    }
  }
})
const emit = defineEmits(['update:value'])

const showValue = ref(props.value)

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题

const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  id: undefined,
  username: undefined,
  identityCard: undefined,
  mobile: undefined,
  deptId: undefined,
  createTime: []
})
const queryFormRef = ref() // 搜索的表单

const selectIds: any = ref([])
initData()

watch(
  () => props.value,
  () => {
    initData()
  }
)

function initData() {
  showValue.value = props.value
  if (props.isSingle) {
    selectIds.value = [props.value]
  } else {
    selectIds.value = JSON.parse(props.value + '')
  }
}

// 选中方法

function clickCheck(value, id) {
  if (props.isSingle) {
    if (value) {
      selectIds.value = [id]
    } else {
      selectIds.value = []
    }
  } else {
    if (value) {
      selectIds.value.push(id)
    } else {
      selectIds.value.splice(selectIds.indexOf(id), 1)
    }
  }
}

function handleOK() {
  if (props.isSingle) {
    showValue.value = selectIds.value[0]
  } else {
    showValue.value = JSON.stringify(selectIds.value)
  }
  emit('update:value', showValue.value)
  dialogVisible.value = false
}

function handleClose() {
  initData()
  dialogVisible.value = false
}

const openDialog = () => {
  dialogVisible.value = true
}

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await UserApi.getUserPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields()
  handleQuery()
}

/** 处理部门被点击 */
const handleDeptNodeClick = async (row) => {
  queryParams.deptId = row.id
  await getList()
}

/** 初始化 */
onMounted(() => {
  getList()
})
</script>
